<template>
    <div>
        <p>您的浏览器指纹为：{{ fingerprint.visitorId }}</p>
        <div class="container">
            <div class="item" v-for="(item, index) in paginatedItems" :key="index">
                {{ item }}
            </div>

            <button v-if="hasMore" @click="loadMore">
                显示更多
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import FingerprintJS from '@fingerprintjs/fingerprintjs';

import { ref, computed,onMounted } from 'vue';
// 定义所有项目数据
const items = ref([
    'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5',
    'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10',
    'Item 11', 'Item 12', 'Item 13', 'Item 14', 'Item 15'
]);

const pageSize = 4; // 每页显示的数量
const currentPage = ref(1); // 当前页数

// 计算分页后的数据
const paginatedItems = computed(() => {
    return items.value.slice(0, currentPage.value * pageSize);
});

// 判断是否还有更多数据可以加载
const hasMore = computed(() => {
    return currentPage.value * pageSize < items.value.length;
});

// 加载更多数据（增加页数）
const loadMore = () => {
    currentPage.value++;
};
onMounted(() => {
    console.log( window,window.innerWidth,window.innerHeight);
})
let fingerprint=reactive({})
FingerprintJS.load().then(fp => {
    fp.get().then(result => {
        console.log(result)
        fingerprint = result;
    });
});
</script>

<style scoped>
/* 容器样式 */
.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 20px;
}

/* 每个 item 的基本样式 */
.item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 按钮样式 */
button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}
</style>
